<script lang="ts" setup>
	// import { discussionLikeApi } from '@/service/my/index'
	import { findNoticeApi } from '@/service/my/index'
	/* 引入 暂无数据 - 图片 */
	import emptyImage from '@/static/images/icons/empty.png'
	const pageNum = ref(0)
	const pageSize = ref(10)

	const loading = ref(false)
	const finished = ref(false)

	// 修改状态管理
	const state = ref<'loading' | 'finished' | 'error'>('loading')

	// 课程列表信息
	const circleMsgList = ref<any[]>([])

	// 请求历史学习记录
	async function getDataRequest(isLoadMore = false) {
		if (loading.value || (finished.value && isLoadMore)) return
		loading.value = true
		const params = { pageNum: pageNum.value, pageSize: pageSize.value }
		const data : any = await findNoticeApi(params)
		if (data?.code === 200) {
			// const { rows = [], total = 0 } = data || {}
		
			// if (isLoadMore) {
			// 	noticeData.value = [...noticeData.value, ...rows]
			// } else {
			// 	noticeData.value = rows
			// }
			circleMsgList.value = data.data
		
			// 判断是否加载完所有数据
			// finished.value = noticeData.value.length >= total
			// state.value = finished.value ? 'finished' : 'loading'
			state.value = 'finished'
		} else {
			console.error('获取点赞列表失败:', data.msg)
			state.value = 'error'
		}
		loading.value = false
	}

	// 页面启动
	onLoad(async () => {
		await getDataRequest(false)
	})

	// 加载更多数据
	const loadMore = async () => {
		if (!loading.value && !finished.value) {
			pageNum.value++
			await getDataRequest(true)
		}
	}

	// 监听页面滚动到底部
	onReachBottom(() => {
		if (!loading.value && !finished.value) {
			loadMore()
		}
	})

	// 跳转课程详情
	const goToDiscussion = (discussion : any) => {
		uni.navigateTo({
			url: `/pages/comment/details/index?commentId=${discussion.likeType == '1' ? discussion.discussionId : discussion.discussionId}`,
		})
	}
</script>
<template>
	<view class="main_container">
		<!-- 骨架屏 -->
		<template v-if="loading && pageNum === 1">
			<wd-skeleton :row="3" animated />
		</template>
		<template v-else>
			<uni-list>
				<uni-list-item v-for="(record, index) in circleMsgList" :key="index">
					<view class="list_item_container2" @click="goToDiscussion(record)">
						<!-- <image :src="notice" class="" /> -->
						<wd-img :width="25" :height="25" src="/static/images/my/circle_icon.png" />
						<view class="circle_info">
							<!-- 标题 -->
							<!-- <text class="circle_title">{{ record.userName }} 点赞了你</text> -->
							<text
								class="circle_title">{{ `${record.fromName}${record.likeType === 1? '点赞了你':'评论了你'}`}}</text>
							<!-- 时间-->
							<text class="notice_time">{{ record.createTime }}</text>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</template>

		<view v-if="circleMsgList.length <= 0" class="empty-state flex-center flex-col mt-200rpx">
			<wd-status-tip :image="emptyImage" tip="暂无讨论圈消息" />
		</view>
		<!-- 添加加载状态和加载完成的提示 -->
		<wd-loadmore v-if="circleMsgList.length > 0" :state="state" @reload="loadMore"
			finished-text="已经全部加载完毕"></wd-loadmore>
	</view>
</template>
<style scoped>
	.main_container {
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.list_item_container2 {
		display: flex;
		align-items: center;
		padding: 15rpx;
		margin: 15rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.circle_info {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-left: 20rpx;
	}

	.circle_title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.notice_time {
		font-size: medium;
		font-size: 24rpx;
		color: #999999;
	}
</style>